<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Product管理</title>
    <link rel="stylesheet" href="/myplugs/css/portal.css">
    <link rel="stylesheet" href="/myplugs/css/mycss.css">
    <link rel="stylesheet" href="/myplugs/css/floating_window.css">
    <link rel="stylesheet" href="/myplugs/css/add_new_float_window.css">
    <script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div class="app-content pt-3 p-md-3 p-lg-4"  id="a">
    <div class="container-xl">
        <div class="row g-3 mb-4 align-items-center justify-content-between">
            <div class="col-auto">
                <a class="app-page-title mb-0">category管理</a>
                <svg onclick="addNewShowPopup()" style="cursor: pointer;margin-left: 6px" t="1680233617466" class="icon" viewBox="0 0 1024 1190" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4445" width="50" height="55">
                    <path d="M512 921.6a409.6 409.6 0 1 0 0-819.2 409.6 409.6 0 0 0 0 819.2zM460.8 460.8V332.8a25.6 25.6 0 0 1 25.6-25.6h51.2a25.6 25.6 0 0 1 25.6 25.6V460.8h128a25.6 25.6 0 0 1 25.6 25.6v51.2a25.6 25.6 0 0 1-25.6 25.6H563.2v128a25.6 25.6 0 0 1-25.6 25.6h-51.2a25.6 25.6 0 0 1-25.6-25.6V563.2H332.8a25.6 25.6 0 0 1-25.6-25.6v-51.2a25.6 25.6 0 0 1 25.6-25.6H460.8z" fill="#3DC389" p-id="4446">
                    </path></svg>
                <!--                <button class="btn app-btn-secondary" onclick="addNewShowPopup()">新增</button>-->
            </div>

            <div class="col-auto">
                <div class="page-utilities">
                    <div class="row g-2 justify-content-start justify-content-md-end align-items-center">
                        <div class="col-auto">
                            <form class="table-search-form row gx-1 align-items-center" action="/Category/selectCategory" method="get">
                                <div class="col-auto">
                                    <input type="text" id="search-orders" name="search"
                                           class="form-control search-orders" placeholder="请输入待搜索内容">
                                </div>
                                <div class="col-auto">
                                    <button type="submit" class="btn app-btn-secondary">搜索</button>
                                </div>
                            </form>
                        </div><!--//col-->
                    </div><!--//row-->
                </div><!--//table-utilities-->
            </div><!--//col-auto-->
        </div><!--//row-->


        <div class="row gy-4">
            <div class="col-12 col-lg-6"  th:each="category:${category}">
                <div class="app-card app-card-account shadow-sm d-flex flex-column align-items-start">
                    <div class="app-card-header p-3 border-bottom-0">
                        <div class="row align-items-center gx-3">
                            <div class="col-auto">
                                <div class="app-icon-holder">
                                    <svg t="1680357295378" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4975" width="200" height="200"><path d="M863.573333 925.500952H160.914286c-42.910476 0-78.019048-35.108571-78.019048-78.019047v-346.209524c0-16.579048 4.87619-32.182857 14.628572-45.348571 1.950476-2.925714 4.388571-5.36381 6.826666-8.289524 7.314286-7.801905 19.992381-8.289524 27.794286-0.487619 7.801905 7.314286 8.289524 19.992381 0.487619 27.794285-1.462857 1.462857-2.438095 2.925714-3.413333 3.900953-4.87619 6.826667-7.314286 14.628571-7.314286 22.918095v346.209524c0 21.455238 17.554286 39.009524 39.009524 39.009524h702.659047c21.455238 0 39.009524-17.554286 39.009524-39.009524v-346.209524c0-8.289524-2.438095-16.091429-7.314286-22.430476-1.950476-2.438095-3.900952-4.87619-5.851428-6.826667-7.801905-7.314286-8.777143-19.504762-1.462857-27.306667 7.314286-7.801905 19.504762-8.777143 27.306666-1.462857 4.388571 3.900952 8.289524 8.289524 11.702858 12.678096 9.752381 13.165714 14.628571 29.257143 14.628571 45.348571v346.209524c0 42.422857-35.108571 77.531429-78.019048 77.531428z" fill="#604C3F" p-id="4976"></path><path d="M113.615238 486.64381c-4.388571 0-8.777143-1.462857-12.190476-4.388572-8.289524-6.826667-9.264762-19.017143-2.438095-27.306667L213.089524 316.952381c6.826667-8.289524 19.017143-9.264762 27.306666-2.438095 8.289524 6.826667 9.264762 19.017143 2.438096 27.306666L128.731429 479.329524c-3.900952 4.87619-9.752381 7.314286-15.116191 7.314286zM911.36 486.64381c-5.36381 0-10.727619-1.950476-14.628571-6.339048l-128.731429-142.384762c-7.314286-7.801905-6.826667-20.48 1.462857-27.306667 7.801905-7.314286 20.48-6.826667 27.306667 1.462857l128.731428 142.384762c7.314286 7.801905 6.826667 20.48-1.462857 27.306667-3.413333 2.925714-8.289524 4.87619-12.678095 4.876191z" fill="#604C3F" p-id="4977"></path><path d="M782.140952 344.259048H629.028571c-10.727619 0-19.504762-8.777143-19.504761-19.504762s8.777143-19.504762 19.504761-19.504762h153.112381c10.727619 0 19.504762 8.777143 19.504762 19.504762s-8.777143 19.504762-19.504762 19.504762zM463.238095 344.259048H232.594286c-10.727619 0-19.504762-8.777143-19.504762-19.504762s8.777143-19.504762 19.504762-19.504762H463.238095c10.727619 0 19.504762 8.777143 19.504762 19.504762s-8.777143 19.504762-19.504762 19.504762z" fill="#604C3F" p-id="4978"></path><path d="M517.851429 404.23619c-3.900952 0-8.289524-1.462857-11.702858-3.900952-4.388571-2.925714-6.826667-7.801905-7.801904-13.165714-0.487619-4.388571-15.11619-113.127619 35.108571-174.567619 49.737143-61.44 125.318095-68.754286 128.731429-68.754286 7.314286-0.487619 14.628571 2.925714 18.529523 9.752381 1.462857 2.438095 36.08381 64.853333-19.017142 151.161905-53.638095 83.870476-137.508571 98.499048-140.921905 98.986666-0.487619 0.487619-1.950476 0.487619-2.925714 0.487619z m133.607619-218.453333c-20.967619 4.87619-59.977143 18.041905-87.28381 52.175238-25.84381 31.695238-29.744762 86.79619-28.281905 121.904762 24.380952-9.264762 64.853333-30.232381 93.622857-75.580952 28.769524-45.83619 26.331429-80.944762 21.942858-98.499048z" fill="#604C3F" p-id="4979"></path><path d="M507.12381 356.937143c-3.900952 0-68.266667-1.462857-111.177143-82.895238-41.935238-79.481905-16.091429-152.137143-15.116191-155.550476 1.950476-4.87619 5.36381-8.777143 10.24-11.215239 4.87619-1.950476 10.24-2.438095 15.116191-0.487619 3.900952 1.462857 95.573333 38.521905 121.417143 105.813334 25.84381 66.80381-1.950476 129.706667-3.413334 132.144762-2.438095 7.801905-9.264762 12.190476-17.066666 12.190476zM413.013333 153.6c-3.413333 22.918095-3.900952 61.927619 17.554286 102.4s47.786667 54.613333 63.390476 59.489524c5.36381-18.529524 11.215238-53.150476-2.438095-88.259048-13.165714-34.620952-53.638095-60.464762-78.506667-73.630476zM707.535238 653.409524c-34.133333 0-51.687619-20.967619-64.853333-36.08381-12.678095-14.628571-19.992381-22.430476-35.108572-22.430476-15.60381 0-22.430476 7.801905-35.108571 22.430476-13.165714 15.11619-30.72 36.08381-64.853333 36.08381-34.133333 0-51.687619-20.967619-64.853334-36.08381-12.678095-14.628571-19.992381-22.430476-35.108571-22.430476-15.60381 0-22.430476 7.801905-35.108572 22.430476-13.165714 15.11619-30.72 36.08381-64.853333 36.08381-34.133333 0-51.687619-20.967619-64.853333-36.08381-12.678095-14.628571-19.992381-22.430476-35.108572-22.430476-10.727619 0-19.504762-8.777143-19.504762-19.504762s8.777143-19.504762 19.504762-19.504762c34.133333 0 51.687619 20.967619 64.853334 36.08381 12.678095 14.628571 19.992381 22.430476 35.108571 22.430476 15.60381 0 22.430476-7.801905 35.108571-22.430476 13.165714-15.11619 30.72-36.08381 64.853334-36.08381 34.133333 0 51.687619 20.967619 64.853333 36.08381 12.678095 14.628571 19.992381 22.430476 35.108572 22.430476 15.60381 0 22.430476-7.801905 35.108571-22.430476 13.165714-15.11619 30.72-36.08381 64.853333-36.08381 34.133333 0 51.687619 20.967619 64.853334 36.08381 12.678095 14.628571 19.992381 22.430476 35.108571 22.430476 15.60381 0 22.918095-7.801905 35.108572-22.430476 13.165714-15.11619 30.72-36.08381 64.853333-36.08381 10.727619 0 19.504762 8.777143 19.504762 19.504762s-8.777143 19.504762-19.504762 19.504762c-15.60381 0-22.918095 7.801905-35.108572 22.430476-12.678095 15.11619-30.72 36.08381-64.853333 36.08381zM707.535238 799.695238c-34.133333 0-51.687619-20.967619-64.853333-36.083809-12.678095-14.628571-19.992381-22.430476-35.108572-22.430477-15.60381 0-22.430476 7.801905-35.108571 22.430477-13.165714 15.11619-30.72 36.08381-64.853333 36.083809-34.133333 0-51.687619-20.967619-64.853334-36.083809-12.678095-14.628571-19.992381-22.430476-35.108571-22.430477-15.60381 0-22.430476 7.801905-35.108572 22.430477-13.165714 15.11619-30.72 36.08381-64.853333 36.083809-34.133333 0-51.687619-20.967619-64.853333-36.083809-12.678095-14.628571-19.992381-22.430476-35.108572-22.430477-10.727619 0-19.504762-8.777143-19.504762-19.504762s8.777143-19.504762 19.504762-19.504761c34.133333 0 51.687619 20.967619 64.853334 36.083809 12.678095 14.628571 19.992381 22.430476 35.108571 22.430476 15.60381 0 22.430476-7.801905 35.108571-22.430476 13.165714-15.11619 30.72-36.08381 64.853334-36.083809 34.133333 0 51.687619 20.967619 64.853333 36.083809 12.678095 14.628571 19.992381 22.430476 35.108572 22.430476 15.60381 0 22.430476-7.801905 35.108571-22.430476 13.165714-15.11619 30.72-36.08381 64.853333-36.083809 34.133333 0 51.687619 20.967619 64.853334 36.083809 12.678095 14.628571 19.992381 22.430476 35.108571 22.430476 15.60381 0 22.918095-7.801905 35.108572-22.430476 13.165714-15.11619 30.72-36.08381 64.853333-36.083809 10.727619 0 19.504762 8.777143 19.504762 19.504761s-8.777143 19.504762-19.504762 19.504762c-15.60381 0-22.918095 7.801905-35.108572 22.430477-12.678095 15.11619-30.72 36.08381-64.853333 36.083809z" fill="#604C3F" p-id="4980"></path></svg>
                                </div><!--//icon-holder-->
                            </div><!--//col-->
                            <div class="col-auto">
                                <h4 class="app-card-title">信息展示</h4>
                            </div><!--//col-->
                        </div><!--//row-->
                    </div><!--//app-card-header-->

                    <div class="app-card-body px-4 w-100" id="aa" th:each="category:${category}" >
                        <div class="item border-bottom py-3">
                            <div class="row justify-content-between align-items-center">
                                <div class="col-auto" style="display: flex;">
                                    <div class="test">
                                        <div class="item-label mb-2"><strong>Picture</strong></div>
                                        <div class="item-data"><img class="profile-image" th:src="${category.description}!=null?${category.description}:'/images/black.jpg'"></div>
                                    </div>
                                    <div style="margin-left: 20px;padding-top: 30px;line-height: 40px;font-size: 20px;color: #15a362;">
                                        <div class="col-auto" >
                                            <div class="item-label"><strong>中文名</strong></div>
                                            <div class="btn app-btn-secondary"th:text="${category.name}"></div>
                                        </div><!--//col-->
                                        <div class="col-auto" id="bb">
                                            <div class="item-label"><strong>英文名</strong></div>
                                            <div class="btn app-btn-secondary" id="thisCategorytId" th:data-index="${category.categoryId}" th:text="${category.categoryId}"></div>
                                        </div><!--//col-->
                                    </div>
                                </div><!--//col-->
                            </div><!--//row-->
                        </div><!--//item-->

                        <div class="app-card-footer p-4 mt-auto">
                            <div class="col text-end pic">
                                <button class="btn app-btn-secondary deleteCategory">删除</button>
                                <input class="btn app-btn-secondary file" type="file" name="file" style="width: 180px;">
                                <a style="display: none" th:text="${category.categoryId}" name="categoryId" class="categoryId"/>
                                <button class="btn app-btn-primary upload" type="button">确定修改图片</button>
                                <button class="btn app-btn-secondary inf" type="button"  onclick="showPopup()">修改更多信息</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 弹窗修改更多信息    position: absolute; top: 25%; left: 25%; width: 55%; height: 55%;-->
<div class="overlay" id="overlay" style="display: none;"></div>
    <form method="post" action="/Category/updateCategory" >
        <div class="popup row gy-4" id="popup" style="display: none; ">
            <div class="app-card-footer p-2 mt-auto">
                <a class="my-css-a">修改更多信息</a>
            </div>
            <div>

                <div>
                    <label class="form-label"><strong>EnglishName</strong></label>
                    <input class="form-control" id="ca_tid" name="ca_tid" readonly="readonly"/>

                    <label class="form-label"><strong>ChineseName</strong></label>
                    <input class="form-control" id="en_catid" name="en_catid" />
                </div>

                <span class="my-css-card">
                    <div class="app-card-footer p-4 mt-auto">
                        <button type="submit" class="btn app-btn-primary" onclick="hidePopup()">保存所有信息</button>
                        <button class="btn app-btn-secondary" type="button" onclick="hidePopup()">取消</button>
                    </div>
                </span>
            </div>
        </div>
    </form>



<!--弹窗-->
<div class="overlay" id="addNewOverlay" style="display: none;"></div>
<form method="post" action="/Category/insertCategory">
    <div class="addNewPopup gy-4 app-card" id="addNewPopup" style="display: none;position: absolute; top: 45%; left: 45%; width: 65%; height: 65%">
        <div class="app-card-footer p-2-2 mt-auto">
            <a class="my-css-a">Category新增</a>
        </div>
        <div>
            <div>
                <label class="form-label"><strong>EnglishName</strong></label>
                <input class="form-control" id="ca_tid2" name="ca_tid2"/>

                <label class="form-label"><strong>ChineseName</strong></label>
                <input class="form-control" id="en_catid2" name="en_catid2"/>
            </div>
        </div>
        <span class="my-css-card">
        <div class="app-card-footer p-4 mt-auto">
            <button type="submit" class="btn app-btn-primary" onclick="addNewHidePopup()">保存所有信息</button>
            <button class="btn app-btn-secondary" type="button" onclick="addNewHidePopup()">取消</button>
        </div>
        </span>
    </div>
</form>
<!--<script src="/myplugs/js/floating_window.js"></script>-->
<!--<script src="/myplugs/js/product_floating_window.js"> </script>-->
<!--<script src="/myplugs/js/add_new_float_window.js"></script>-->
<script>
    $(".upload").click(function (){
        // 获取要上传的图片
        var image = $(this).parents(".pic").children(".file")[0].files[0];
        // 获取与图片相关的字符串
        var category = $(this).parents(".pic").children(".categoryId").text();
        var reader = new FileReader();
        var imgURL;
        reader.readAsDataURL(image);
        reader.onload = function (e){
            imgURL = this.result;
        }
        var pic = $(this).parents(".app-card-body").children(".item")
            .children(".row").children(".col-auto").children(".test")
            .children(".item-data").children(".profile-image");
        // 创建FormData对象
        var file = new FormData();
        // 添加图片和相关字符串到表单
        file.append("image", image);
        // formData.append("product", product);

        $.ajax({
            type:"post",
            url:"/Category/upload",
            cache:false,
            async:true,
            data:file,
            dataType:'json',
            processData:false,
            contentType:false,
            headers:{'category':category},
            success:function (result){
                console.log("success");
            },
            error:function (result){
                console.log("fail");
                pic.attr('src',imgURL);
            }
        })
    })

    function showPopup() {
        document.getElementById("overlay").style.display = "block";
        document.getElementById("popup").style.display = "block";
    }

    function hidePopup() {
        document.getElementById("overlay").style.display = "none";
        document.getElementById("popup").style.display = "none";
    }

    function addNewShowPopup() {
        document.getElementById("addNewOverlay").style.display = "block";
        document.getElementById("addNewPopup").style.display = "block";
    }

    function addNewHidePopup() {
        document.getElementById("addNewOverlay").style.display = "none";
        document.getElementById("addNewPopup").style.display = "none";
    }

    $(".inf").click(function (){
        $.ajax({
            type:"get",
            url:"/Category/getCategoryInf",
            dataType:"json",
            contextType:"application/json;charset=UTF-8",
            data:'categoryId='+$(this).parents(".pic").children(".categoryId").text(),
            // data:'productId='+$(this).parents('div').children('#thisProductId').text(),
            // data:'productId='+$(this).children('#thisProductId').text(),
            success:function (result){
                console.log(result);
                console.log(result.categoryId);
                $("#ca_tid").val(result.categoryId);
                $("#en_catid").val(result.name);
            }
        })
    })

    $(".deleteCategory").click(function () {
        // 获取与图片相关的字符串
        var categroy = $(this).parents(".pic").children(".categoryId").text();
        $.ajax({
            type: "delete",
            url: "/Category/deleteCategory",
            data: 'category=' + categroy,
            dataType: 'json',
            success: function (result) {
                console.log("success");
                // location.reload(true);
            },
            error: function (result) {
                console.log("fail");
                location.reload(true);
            }
        })
    })

</script>

</body>
</html>